<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form id="form" ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="ID:" prop="customer_id" v-show="false">
                    <el-input v-model="form.customer_id" disabled />
                </el-form-item>
                <el-form-item label="时间:" prop="date_added">
                    <el-input v-model="form.date_added" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="姓名:" prop="title">
                    <el-input v-model="form.title" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                    <el-input v-model="form.email" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="地址:" prop="address1">
                    <el-input v-model="form.address1" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="国家:" prop="country">
                    <el-input v-model="form.country" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="电话:" prop="mobile">
                    <el-input v-model="form.mobile" placeholder="" clearable />
                </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {},
            form: {},
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
    },
}
</script>
<style>
#form p {
    margin: 0;padding: 0;
}
</style>
